export const compMap = {
    // form组件控件配置
    formWrapper: {
        component: "VFormWrapper",
        icon: "/images/svg/form.svg",
        title: "表单组件",
        props: {
            title: "基础表单",
            columns: [],
            labelSpan: 6,
            controlSpan: 18,
            colNum: 1,
            layout: "horizontal",
            formExtra: {}
        }
    },
    datepicker: {
        component: "DatePicker",
        icon: "/images/svg/timePicker.svg",
        title: "时间选择器",
        props: {
            label: "时间选择器",
            field: "datepicker",
            style: {width: "100%"},
        }
    },
    switch: {
        component: "Switch",
        icon: "/images/svg/switch.svg",
        title: "开关",
        props: {
            label: "开关",
            field: "switch"
        }
    },
    checkbox: {
        component: "Checkbox",
        icon: "/images/svg/checkbox.svg",
        title: "多选框",
        props: {
            label: "多选框",
            field: "checkbox"
        }
    },
    slider: {
        component: "Slider",
        icon: "/images/svg/slider.svg",
        title: "滑动输入条",
        props: {
            label: "滑动条",
            field: "slider"
        }
    },
    inputText: {
        component: "Input",
        icon: "/images/svg/text.svg",
        title: "文本输入框",
        props: {
            label: "文本框",
            field: "text"
        }
    },
    inputNumber: {
        component: "InputNumber",
        icon: "/images/svg/inputNumber.svg",
        title: "数字输入框",
        props: {
            label: "数字输入",
            field: "number",
            style: {width: "100%"}
        }
    },
    password: {
        component: "Password",
        icon: "/images/svg/inputPassword.svg",
        title: "密码输入框",
        props: {
            label: "密码",
            field: "password"
        }
    },
    select: {
        component: "Select",
        icon: "/images/svg/select.svg",
        title: "选择器",
        props: {
            label: "选择器",
            field: "select"
        }
    },
    checkboxGroup: {
        component: "CheckboxGroup",
        icon: "/images/svg/checkbox.svg",
        title: "多选框组",
        props: {
            label: "多选框组",
            field: "checkboxGroup",
            options: [{label: "选项1", value: 1}]
        }
    },
    radioGroup: {
        component: "VRadio",
        icon: "/images/svg/radioGroup.svg",
        title: "单选框组",
        props: {
            label: "单选框组",
            field: "radioGroup",
            options: [{label: "选项1", value: 1}]
        }
    },
    score: {
        component: "Rate",
        icon: "/images/svg/rate.svg",
        title: "评分",
        props: {
            label: "评分",
            field: "Rate",
        }
    },
    button: {
        component: "VButton",
        icon: "/images/svg/button.svg",
        title: "按钮",
        props: {
            text: "提交按钮",
            type: "primary",
            size: "middle",
            style: { color: "#FFF" }
        }
    },

    // table组件控件配置
    tableWrapper: {
        component: "VTableWrapper",
        icon: "/images/svg/table.svg",
        title: "Table组件",
        props: {
            title: "基础Table",
            dataSource: [],
            extra: {},
        }
    },
    text: {
        component: "VText",
        icon: "/images/svg/text.svg",
        title: "文本",
        columnProps: {
            title: "文本",
            dataIndex: "VText",
            align: "left"
        },
        props: {
            tag: "p",
            text: "-",
        },
    },
    number: {
        component: "VNumber",
        icon: "/images/svg/statistic.svg",
        title: "数值",
        columnProps: {
            title: "数值",
            dataIndex: "VNumber",
            align: "left"
        },
        props: {
            precision: 2,
            text: 0.00
        }
    },
    tag: {
        component: "VTag",
        icon: "/images/svg/tag.svg",
        title: "标签",
        columnProps: {
            title: "标签",
            dataIndex: "VTag",
            align: "left"
        },
        props: {
            text: "#108ee9",
            color: "#108ee9"
        }
    },
    time: {
        component: "VTime",
        icon: "/images/svg/time.svg",
        title: "时间",
        columnProps: {
            title: "时间",
            dataIndex: "VTime",
            align: "left"
        },
        props: {
            format: "YYYY-MM-DD"
        }
    },
    image: {
        component: "VImage",
        icon: "/images/svg/image.svg",
        title: "图片",
        columnProps: {
            title: "图片",
            dataIndex: "VImage",
            align: "left"
        },
        props: {
            src: "/images/svg/image.svg",
            _injectValueKey: "src",
            style: {
                width: "50px",
                height: "50px"
            }
        }
    },
    buttonGroup: {
        component: "VButtonGroup",
        icon: "/images/svg/buttonGroup.svg",
        title: "按钮组",
        columnProps: {
            title: "按钮组",
            dataIndex: "VButtonGroup",
            align: "left"
        },
        props: {
            btns: [{
                text: "按钮1",
                type: "primary",
                size: "middle"
            }]
        }
    },
    tagGroup: {
        component: "VTagGroup",
        icon: "/images/svg/tagGroup.svg",
        title: "标签组",
        columnProps: {
            title: "标签组",
            dataIndex: "VTagGroup",
            align: "left"
        },
        props: {
            _injectValueKey: "tags",
            color: "#108ee9"
        }
    },

    // echarts组件控件配置
    echartsWrapper: {
        component: "VEchartsWrapper",
        icon: "/images/svg/LineStep.png",
        title: "Echarts组件",
        props: {
            title: "基础Echarts图表",
            echartsNode: null
        }
    },
    lineCharts: {
        component: "VReactEcharts",
        icon: "/images/svg/Line.png",
        title: "基础折线图",
        props: {
            getOptions: async () => {
                return {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '邮件营销',
                            type: 'line',
                            stack: '总量',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '联盟广告',
                            type: 'line',
                            stack: '总量',
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '视频广告',
                            type: 'line',
                            stack: '总量',
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '直接访问',
                            type: 'line',
                            stack: '总量',
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '搜索引擎',
                            type: 'line',
                            stack: '总量',
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };
            }
        }
    },
    barCharts: {
        component: "VReactEcharts",
        icon: "/images/svg/Bar.png",
        title: "基础柱状图",
        props: {
            getOptions: async () => {
                return {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar'
                    }]
                };
            }
        }
    },
    barVerticalCharts: {
        component: "VReactEcharts",
        icon: "/images/svg/BarVerticalStack.png",
        title: "垂直堆叠柱状图",
        props: {
            getOptions: async () => {
                return {
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '直接访问',
                            type: 'bar',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '邮件营销',
                            type: 'bar',
                            stack: '广告',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '联盟广告',
                            type: 'bar',
                            stack: '广告',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '视频广告',
                            type: 'bar',
                            stack: '广告',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '搜索引擎',
                            type: 'bar',
                            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                            emphasis: {
                                focus: 'series'
                            },
                        },
                        {
                            name: '百度',
                            type: 'bar',
                            barWidth: 5,
                            stack: '搜索引擎',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [620, 732, 701, 734, 1090, 1130, 1120]
                        },
                        {
                            name: '谷歌',
                            type: 'bar',
                            stack: '搜索引擎',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [120, 132, 101, 134, 290, 230, 220]
                        },
                        {
                            name: '必应',
                            type: 'bar',
                            stack: '搜索引擎',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [60, 72, 71, 74, 190, 130, 110]
                        },
                        {
                            name: '其他',
                            type: 'bar',
                            stack: '搜索引擎',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [62, 82, 91, 84, 109, 110, 120]
                        }
                    ]
                };
            }
        }
    },
    pieCharts: {
        component: "VReactEcharts",
        icon: "/images/svg/Pie.png",
        title: "基础饼图",
        props: {
            getOptions: async () => {
                return {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: 1048, name: '搜索引擎'},
                                {value: 735, name: '直接访问'},
                                {value: 580, name: '邮件营销'},
                                {value: 484, name: '联盟广告'},
                                {value: 300, name: '视频广告'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
            }
        }
    },
    pieRingCharts: {
        component: "VReactEcharts",
        icon: "/images/svg/PieRing.png",
        title: "环图",
        props: {
            getOptions: async () => {
                return {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: ['55%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 1048, name: '搜索引擎'},
                                {value: 735, name: '直接访问'},
                                {value: 580, name: '邮件营销'},
                                {value: 484, name: '联盟广告'},
                                {value: 300, name: '视频广告'}
                            ]
                        }
                    ]
                };
            }
        }
    },
    pieRose: {
        component: "VReactEcharts",
        icon: "/images/svg/PieRose.png",
        title: "玫瑰图",
        props: {
            getOptions: async () => {
                return {
                    legend: {
                        top: 'top'
                    },
                    series: [
                        {
                            name: '面积模式',
                            type: 'pie',
                            radius: [30, 120],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 3
                            },
                            data: [
                                {value: 40, name: 'rose 1'},
                                {value: 38, name: 'rose 2'},
                                {value: 32, name: 'rose 3'},
                                {value: 30, name: 'rose 4'},
                                {value: 28, name: 'rose 5'},
                                {value: 26, name: 'rose 6'},
                                {value: 22, name: 'rose 7'},
                                {value: 18, name: 'rose 8'}
                            ]
                        }
                    ]
                };
            }
        }
    },
    areaCharts: {
        component: "VReactEcharts",
        icon: "/images/svg/Area.png",
        title: "基础面积图",
        props: {
            getOptions: async () => {
                return {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '邮件营销',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name: '联盟广告',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name: '视频广告',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name: '直接访问',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [320, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name: '搜索引擎',
                            type: 'line',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'top'
                            },
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [820, 932, 901, 934, 1290, 1330, 1320]
                        }
                    ]
                };
            } 
        }
    }
}